import React, {useEffect} from 'react';
import {StatusBar} from 'react-native';
import Login from '@/screens/Login';
import {Container} from '../../rcomponents';
import AppIntroSlider from '../../rcomponents/AppIntroSlider';
import colors from '../../Themes/Colors';

const slides = [
  {
    key: 'loongair',
    text: '掌上办公门户',
    // renderExtra: LanguageSlideItem,
    image: require('@/assets/images/hero01.png'),
    backgroundColor: colors.blueJeans,
  },
  {
    key: 'maintaince',
    text: '维修管理平台',
    image: require('@/assets/images/hero02.png'),
    backgroundColor: colors.androidGreen,
  },
];

const AppIntro = ({navigation}) => {
  const _onDone = () => {
    navigation.navigate(Login.routeName);
    //StatusBar.setHidden(false);
  };
  useEffect(() => {
    StatusBar.setHidden(true);
    return () => {
      StatusBar.setHidden(false);
    };
  }, []);

  return (
    <Container>
      <AppIntroSlider
        slides={slides}
        onDone={_onDone}
        onSkip={_onDone}
        skipLabel="忽略"
        doneLabel="开启移动办公"
        nextLabel=">"
        prevLabel="<"
        showPrevButton={true}
        showSkipButton={true}
      />
    </Container>
  );
};

AppIntro.routeName = 'AppIntro';
export default AppIntro;
